/**
 * Created by zyy on 15/6/8.
 * zhangyuyu@superjia.com
 */
.arrow-top {
    position: relative;
    background: #fff;
    border: 1px solid #e4e4e4;
}
.arrow-top:after, .arrow-top:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow-top:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}
.arrow-top:before {
    border-color: rgba(228, 228, 228, 0);
    border-bottom-color: #e4e4e4;
    border-width: 7px;
    margin-left: -7px;
}

.triangle-top{
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #ffffff transparent;

}
.triangle-bottom{
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 5px 0 5px;
    border-color: #ffffff transparent transparent transparent;

}
.triangle-left{
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 10px 5px 0;
    border-color: transparent #ffffff transparent transparent;

}
.triangle-right{
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #ffffff;

}